<template>
  <!-- 人资BI -->
  <div class="humanResourcesBI">
    <hearder></hearder>
    <div class="main bg">
      <div class="left">
        <div class="orange-border">
          <div class="title">
            <span>人员基本情况</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :theadList="employeeThead" :data="employeeData"></tableBox>
        </div>
        <div class="blue-border">
          <div class="title">
            <span>例会</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :theadList="meetingThead" :data="meetingData"></tableBox>
        </div>
        <div class="green-border">
          <div class="title">
            <span>加班</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
        </div>
        <div class="orange-border">
          <div class="title">
            <span>履约工作计划与完成数，客户确认状态</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :theadList="workStatusThead" :data="workStatusData"></tableBox>
        </div>
      </div>
      <div class="center">
        <div class="green-border">
          <div class="title">
            <span>人员岗位情况</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :data="positionData" :theadList="[]"></tableBox>
        </div>
        <div class="orange-border">
          <div class="title">
            <span>人员基本情况</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :data="personnelData" :theadList="[]"></tableBox>
        </div>
        <div class="blue-border performance-box">
          <div class="performance1">
            <div class="title">
              <span>绩效排序（正序）</span>
            </div>
            <tableBox :data="performance1Data" :theadList="performance1Thead"></tableBox>
          </div>
          <div class="performance2">
            <div class="title">
              <span>绩效排序（倒序）</span>
              <el-button icon="el-icon-arrow-right" circle size="mini" />
            </div>
            <tableBox :data="performance2Data" :theadList="performance2Thead"></tableBox>
          </div>
        </div>
        <div class="orange-border">
          <div class="title">
            <span>履约客诉与处置数</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :data="disposalData" :theadList="disposalThead"></tableBox>
        </div>
        <div class="green-border">
          <div class="title">
            <span>履约客户满意度调查</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="orange-border">
          <div class="title">
            <span>保险保单</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :data="insurancelData" :theadList="insuranceThead"></tableBox>
        </div>
        <div class="orange-border">
          <div class="title">
            <span>保险出险</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :data="incidentData" :theadList="incidentThead"></tableBox>
        </div>
        <div class="orange-border">
          <div class="title">
            <span>培训</span>
            <el-button icon="el-icon-arrow-right" circle size="mini" />
          </div>
          <tableBox :data="trainingData" :theadList="[]"></tableBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import hearder from "./components/header-box.vue";
import tableBox from "./components/table-box.vue";
import { mixins } from "./components/mixins.js";
import Table from "../financeReportBINew/components/table.vue";

export default {
  components: { hearder, tableBox, Table },
  mixins: [mixins],

  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.humanResourcesBI {
  width: 100vw;
  min-height: 100vh;
  background-color: #dee0ed;
  position: relative;

  .bg {
    background-image: url('~@/assets/images/bgBI.png');
    background-size: 100% 100%;
  }

  .main {
    padding: 26px 16px;
    height: 94vh;
    box-sizing: border-box;
    display: flex;

    >div {
      width: 19%;
      height: 100%;
      margin: 0 12px;

      >div {
        background: rgba(255, 255, 255, 0.4);
        box-shadow: 0px 2px 6px 0px rgba(255, 255, 255, 0.25);
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .title {
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          align-items: center;
          margin: 0 0 10px 0;
        }
      }
    }

    .left {
      width: 39%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;

      >div {
        width: 100%;
        height: 32%;
      }

      >div:nth-child(2),
      >div:nth-child(3) {
        width: 49%;
      }
    }

    .center {
      width: 39%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;

      >div {
        width: 49%;
        height: 32%;
      }

      .performance-box {
        width: 100%;
        display: flex;
        flex-direction: row;

        >div {
          width: 49%;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;

          .title {
            text-align: center;
            display: block;
            position: relative;

            .el-button {
              position: absolute;
              right: 0;
            }
          }
        }

        .performance1 {
          padding-right: 32px;
          border-right: 1px solid #dddddd;
        }

        .performance2 {
          padding-left: 32px;
        }
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-content: space-between;

      >div {
        height: 32%;
      }
    }

    .green-border {
      border: 1px solid;
      border-image: linear-gradient(180deg,
          rgba(49, 192, 114, 0.6),
          rgba(49, 192, 114, 0)) 1 1;

      flex-shrink: 0;
      background: linear-gradient(to left, #31c072, #31c072) left top no-repeat,
        linear-gradient(to bottom, #31c072, #31c072) left top no-repeat,
        linear-gradient(to left, #31c072, #31c072) right top no-repeat,
        linear-gradient(to bottom, #31c072, #31c072) right top no-repeat,
        rgba(255, 255, 255, 0.4);
      background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
    }

    .orange-border {
      border: 1px solid;
      border-image: linear-gradient(180deg,
          rgba(255, 128, 0, 0.6),
          rgba(255, 128, 0, 0)) 1 1;
      background: linear-gradient(to left, #ff8000, #ff8000) left top no-repeat,
        linear-gradient(to bottom, #ff8000, #ff8000) left top no-repeat,
        linear-gradient(to left, #ff8000, #ff8000) right top no-repeat,
        linear-gradient(to bottom, #ff8000, #ff8000) right top no-repeat,
        rgba(255, 255, 255, 0.4);
      background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
    }

    .blue-border {
      border: 1px solid;
      border-image: linear-gradient(180deg,
          rgba(0, 111, 255, 0.6),
          rgba(0, 111, 255, 0)) 2 2;
      background: linear-gradient(to left, #006fff, #006fff) left top no-repeat,
        linear-gradient(to bottom, #006fff, #006fff) left top no-repeat,
        linear-gradient(to left, #006fff, #006fff) right top no-repeat,
        linear-gradient(to bottom, #006fff, #006fff) right top no-repeat,
        rgba(255, 255, 255, 0.4);
      background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
    }
  }
}
</style>
